<template>
  <div class="share-service">
    <secondaryMenu :modelValue.sync="openCollectBool" />
    <div :class="['views-page-wrap', { 'views-put': openCollectBool }]">
      <div class="views-page">
        <router-view v-slot="{ Component, route }">
          <keep-alive v-if="route.meta.keepAlive">
            <component :is="Component" />
          </keep-alive>
          <component :is="Component"
            v-else />
        </router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import secondaryMenu from '@/components/secondary-menu/index';

  export default {
    name: 'IndexTwo',
    components: {
      secondaryMenu
    },
    data() {
      return {
        openCollectBool: false
      };
    },
    created() {}
  };
</script>

<style lang="scss" scoped>
  .share-service {
    position: relative;
    width: 100%;
    height: 100%;
    .views-page-wrap {
      padding-left: $--menu-W;
      height: 100%;
      transition: all 0.5s;
      .views-page {
        width: 100%;
        height: 100%;
        padding: 20px;
      }
    }
    .views-put {
      padding-left: $--fold-menu-W;
    }
  }
</style>